Dentre as preocupações para a montagem da interface do sistema, estamos estabelecendo foco em questões como agilidade, acessibilidade e usabilidade. Desta forma, o projeto tem uma identidade visual padronizada em todas as telas que são projetadas para funcionamento em desktops e dispositivos móveis.
O diagrama apresentado na Figura X mostra o fluxo de interação do usuário pelas telas do sistema. Cada uma das telas deste fluxo é detalhada na seção de Wireframes que se segue. Para visualizar o wireframe interativo, acesse o ambiente Canva do projeto.
Figura 2 - Fluxo de telas do usuário
Conforme fluxo de telas do projeto, apresentado no item anterior, as telas do sistema são apresentadas em detalhes nos itens que se seguem. As telas do sistema apresentam uma estrutura comum que é apresentada na Figura abaixo. Nesta estrutura, existem 3 grandes blocos, descritos a seguir. São eles:
- Cabeçalho- Local onde são dispostos elementos fixos de identidade como o logo, e a navegação principal do site (menu da aplicação);
- Conteúdo- Apresentará, para cada tela, seu conteúdo personalizado;
- Rodapé - Contém informações sobre direitos autorais, newsletter e social media.
Figura 3 - Estrutura padrão do site
A tela home page mostra informações para auxiliar imigrantes e refugiados. Com base na estrutura padrão, o bloco cabeçalho possui 3 elementos distintos:
- Componente de doação- Permite doar um valor definido pelo usuário, ajudando institutos de imigrantes e refugiados;
- Componente de dark mode - O dark mode é uma opção que muda a aparência de uma página para um fundo escuro, reduzindo a fadiga visual do usuário e a quantidade de luz emitida pela tela.
- Componente de tradução- Proporcionará a tradução do site em inglês, facilitando o entendimento do usuário para obter as informações que necessita.
Bloco conteúdo- Mostra todas as informações (imagem e título) necessárias que um imigrante ou refugiado precisa saber ao chegar no Brasil, facilitando o acesso a serviços básicos, dicas de integração cultural, oportunidades de trabalho e educação.
Bloco rodapé- permite que o usuário se cadastre na nossa newsletter para receber mais informações e novidades.
Figura 4 - Tela inicial com todas as informações
A tela de leitura da informação contará com um título com uma imagem de fundo. Abaixo do título, contará com um texto informativo relacionado ao título e em cada tela de informação terá um card de comentário abaixo do texto, onde irão conter os comentários das pessoas e um bloco para deixar seu comentário, e cada um acompanhará o nome e sobrenome da pessoa, e um ícone avatar do usuário sem a foto. Após redigir o comentário, o usuário deverá clicar no botão “comentar” para postar o comentário. O bloco cabeçalho apresenta o título da página, e os mesmos elementos da home page (a logo e o menu da aplicação).
O bloco rodapé apresenta os mesmos elementos da home-page.
Figura 5 - Tela de Leitura da informação
A tela de envio do currículo se encontrará na tela de leitura da informação “mercado de trabalho”, onde o usuário poderá encontrar informações e dicas sobre como conseguir um emprego no Brasil. O usuário terá a opcão de enviar seu currículo para que alguém possa ajudar a formata-lo, e caso não possua, contará com auxílio para a criação de um.
O bloco cabeçalho apresenta o título da página, e os mesmos elementos da home page (a logo e o menu da aplicação).
O bloco rodapé apresenta os mesmos elementos da home-page.
Figura 6 - Tela sobre dicas de mercado de trabalho e para envio de currículo
A tela vai apresentar as formas de pagamento disponíveis (pix, cartão de crédito ou boleto bancário), e do valor que o usuário deseja doar. Abaixo dos valores, terá um aviso ressaltando que o valor da doação é destinado integralmente às ongs que ajudam imigrantes e/ou refugiados. Após selecionar a forma de pagamento e o valor, o usuário poderá clicar no botão “Próximo” para dar seguimento ao pagamento.
O bloco cabeçalho apresenta o título da página, e os mesmos elementos da home page (a logo e o menu da aplicação).
O bloco rodapé apresenta os mesmos elementos da home-page.
Figura 7 - Tela de doação para selecionar valor e forma de pagamento
Selecionada a forma de pagamento e o valor a ser doado, o usuário será redirecionado para a tela de informações pessoais, onde irá inserir seus dados (nome, email, cidade e estado). O usuário deve preencher todos os campos com seus dados para avançar para a página de efetuação do pagamento.
O bloco cabeçalho apresenta o título da página, e os mesmos elementos da home page (a logo e o menu da aplicação).
O bloco rodapé apresenta os mesmos elementos da home-page.
Figura 8 - Tela de doação para preencher dados pessoais
A tela de pagamento PIX apresenta, no bloco conteúdo, três campos para preencher com nome, cpf e email e o QR CODE para efetuar o pagamento. O bloco cabeçalho apresenta o título da página, e os mesmos elementos da home page (a logo e o menu da aplicação). O bloco rodapé apresenta os mesmos elementos da home-page.
Figura 9 - Tela de doação para realizar pagamento com pix
Se o usuário escolher a forma de pagamento via cartão de crédito, será redirecionado a tela de pagamento onde terá os campos para preencher os seus dados bancários como bandeira do cartão, número do cartão, nome do titular, validade do cartão e CVV. Após preenchidos todos os campos, o usuário poderá clicar no botão “pagar”. O bloco cabeçalho apresenta o título da página, e os mesmos elementos da home page (a logo e o menu da aplicação). O bloco rodapé apresenta os mesmos elementos da home-page.
Figura 10 - Tela de doação para realizar pagamento com cartão de crédito
Selecionado o pagamento via boleto bancário, o usuário será redirecionado para a tela que apresentará campos para preencher com nome, email e cpf/cnpj. Ao lado aparecerá o valor do boleto e o código de barras. Ao finalizar os dados o usuário receberá um link via email para visualização do boleto. O bloco cabeçalho apresenta o título da página, e os mesmos elementos da home page (a logo e o menu da aplicação). O bloco rodapé apresenta os mesmos elementos da home-page.
Figura 11 - Tela de doação para realizar pagamento com boleto
Após cumprir todos os passos para o pagamento, o usuário será redirecionado para a página de finalização do pagamento onde aparecerá no bloco conteúdo uma mensagem com a verificação do pagamento, sinalizando que o pagamento foi confirmado e/ou o boleto foi gerado com sucesso. O bloco cabeçalho apresenta o título da página, e os mesmos elementos da home page (a logo e o menu da aplicação). O bloco rodapé apresenta os mesmos elementos da home-page.
Figura 12 - Tela de doação com a mensagem de pagamento finalizado